<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>管理员首页</title>
	<link href="../image/icon.jpg" rel="icon">
	<link href="../css/bootstrap.css" rel="stylesheet" >
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">后台板块管理</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form" action="/forumweb/UserServlet?op=managerLoginOut" method="post">
            <div class="form-group">
              <!-- <input type="text" placeholder="Email" class="form-control"> -->
              <a  href="https://www.baidu.com/s" style="text-decoration: underline;">百度一下</a>
            </div>
            <div class="form-group">
              <!-- <a  href="www.baidu.com">百度一下</a> -->
            </div>
            <button type="submit" class="btn btn-success">登出</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>消息公告</h1>
        <p>目前有0个人提交版主申请!</p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-8">
         	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">添加父板块</button>
			<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal1">添加子板块</button>
			<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal2">编辑板块</button>
			<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal3">版主审核</button>
        </div>
        <div class="col-md-4"></div>
        

        <!-- 主版块添加模态框 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  			<div class="modal-dialog" role="document">
    			<div class="modal-content">
      				<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        				<h2 class="modal-title" id="exampleModalLabel" style="color: #8A2BE2">添加父板块</h2>
      				</div>
      				<div class="modal-body">
        				<form  action="../BoardServlet?op=addFatherPlate" method="post">
         	 				<div class="form-group">
            					<label for="recipient-name" class="control-label" style="color: blue">板块名称:</label>
            					<input type="text" class="form-control" id="fatherPlate1" name="fatherPlateName" onblur="checkPlateExists(this)" placeholder="此处输入板块名称,不能重复!">
          					</div>
          					<div class="form-group">
            					<label for="message-text" class="control-label" style="color: blue">板块描述:</label>
            					<textarea class="form-control" id="message-text" placeholder="此处输入板块描述" name="fatherPlateDesc"></textarea>
          					</div>
          					<div class="modal-footer">
      							<label id="promptLabel1" style="color: red; font-size: 8px;"></label>
        						<button type="submit" class="btn btn-info" id = "button1">确认添加</button>
      						</div>
        				</form>
      				</div>
    			</div>
  			</div>
		</div>
		<!-- 子版块添加模态框 -->
		<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  			<div class="modal-dialog" role="document">
    			<div class="modal-content">
      				<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        				<h2 class="modal-title" id="exampleModalLabel" style="color: #8A2BE2">添加子板块</h2>
      				</div>
      				<div class="modal-body">
        				<form  action="../BoardServlet?op=addChildPlate" method="post" >
        					<div class="form-group">
            					<label for="recipient-name" class="control-label" style="color: blue">父板块:</label>
            					<select name="fatherPlateName">
            						<c:forEach items="${allFatherBoard}" var="board">
            							<option>${board}</option>
            						</c:forEach>
            					</select>
          					</div>
         	 				<div class="form-group">
            					<label for="recipient-name" class="control-label" style="color: blue">板块名称:</label>
            					<input type="text" class="form-control" id="fatherPlate2" name="childPlateName" onblur="checkPlateExists(this)" placeholder="此处输入板块名称,不能重复!">
          					</div>
          					<div class="form-group">
            					<label for="message-text" class="control-label" style="color: blue">板块描述:</label>
            					
            					<textarea class="form-control" id="message-text" placeholder="此处输入板块描述" name="childPlateDesc"></textarea>
          					</div>
          					<div class="modal-footer">
      							<label id="promptLabel2" style="color: red; font-size: 8px;"></label>
        						<button type="submit" class="btn btn-info" id="button2">确认添加</button>
      						</div>
        				</form>
      				</div>
    			</div>
  			</div>
		</div>
      </div>
      <div style="padding-top: 2%">
      	<table class="table table-hover">
        	<thead>
	      		<tr>
	         		<th>板块id号</th>
	         		<th>板块父id号</th>
	         		<th>板块名称</th>
	         		<th>板块描述</th>
	        		<th>板块添加时间</th>
	        		<th>是否删除</th>
	      		</tr>
	   		</thead>
	    	<tbody>
		   		<c:choose>
		   			<c:when test="${allBoard==null}">
		   				<tr>
							<td colspan="5"align="center">目前数据库中没有板块信息,待添加!</td>
						</tr>
		   			</c:when>
		   			<c:when test="${allBoard!=null}">
		   				<c:forEach items="${allBoard}" var="board">
							<tr>
								<td>${board.id}</td>
								<td>${board.pid}</td>
								<td>${board.name}</td>
								<td>${board.desc}</td>
								<td>${board.addTime}</td>
								<td> 
									<input type="button" value="删除" class="btn btn-danger">
								</td>
							</tr>
						</c:forEach>	      	
		   			</c:when>
		   		</c:choose>
		   </tbody>
      </table>
      </div>
      
      <hr>	<!-- 添加分割线换行 -->
      <footer>
        <p style="color: blue">&copy; author: Link</p>
      </footer>
    </div> <!-- /container -->
   
    <script type="text/javascript">
    	
 		/* 判断输入的板块是否存在 */
    	function checkPlateExists(){
    		var fatherPlateObj = arguments[0];
    		var idNum = fatherPlateObj.id.substring(fatherPlateObj.id.length-1,fatherPlateObj.id.length);//获取板块id后缀
    		$.ajax({
    			url:'../BoardServlet?op=checkFatherPlate',
    			type:'post',
    			data:{'plateName':fatherPlateObj.value},
    			success:function(data){
    				if(data === 'exist'){
    					document.getElementById("promptLabel"+idNum).innerHTML='此板块名已存在,不可用!';
    					document.getElementById("button"+idNum).disabled='disabled';
    				}else if(data === 'inexistence'){
    					document.getElementById("promptLabel"+idNum).innerHTML='此板块可用!';
    					document.getElementById("button"+idNum).disabled='';
    				}
    			}
    			
    		});
    	}
    
    </script>
    
</body>
</html>







